<template>
	<view class="item" v-for="(item,index) in data.meetingList" :key="index" 
	@click="$pageGo(`/mainPage/meetingdetail?id=${item.id}`)">
		<image :src="item.image_text" mode="aspectFill"></image>
		<view class="title">
			{{item.title}}
		</view>
		<view class="flex" style="margin-top: 20rpx;">
			<image class="icon" src="/static/c1.png" mode=""></image>
			<view class="text">
				{{time(item.start_time)}}
			</view>
		</view>
		<view class="flex_jc_sb">
			<view class="flex" style="margin-top: 20rpx;">
				<image class="icon" src="/static/c2.png" mode=""></image>
				<view class="text">
					{{item.city}}
				</view>
			</view>
			<view class="btns b1" v-if="item.state_text == 2&&item.meetorder_start == 3">
				已报名
			</view>
			<view class="btns b3" v-if="item.state_text == 2 && item.meetorder_start !=3">
				报名中
			</view>
			<view class="btns b5" v-if="item.state_text == 1">
				未开始
			</view>
			<view class="btns b5" v-if="item.state_text == 3">
				已结束
			</view>
		</view>
	</view>
	<view class="" style="height: 66rpx;">

	</view>
	<view class="k1" v-if="data.meetingList.length == 0">
		<image src="/static/bkong.png" mode=""></image>
		<view class="texts">
			暂无内容
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	import {
		getMeetingList
	} from '@/common/http.api.js';

	const time = computed(() => {
		return (tt) => {
			let timenum = tt * 1000
			console.log(timenum);
			const date = new Date(timenum);
			// 补零函数
			const padZero = num => num.toString().padStart(2, '0');
			// 提取日期各部分
			const year = date.getFullYear();
			const month = padZero(date.getMonth() + 1); // 月份从0开始需+1
			const day = padZero(date.getDate());
			const hours = padZero(date.getHours());
			const minutes = padZero(date.getMinutes());
			const seconds = padZero(date.getSeconds());

			// 周几映射（0: 周日，1: 周一，...）
			const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			const weekday = weekdays[date.getDay()];

			// 拼接格式：YYYY-MM-DD HH:mm:ss 周X
			return `${month}/${day} ${hours}:${minutes} | 周${weekday}`;
		}
	})
	const data = reactive({
		params: {
			p: 2,
			page: 1,
			limit: 10
		},
		meetingList: []
	})
	onReachBottom(() => {
		data.params.page++
		getMeetingList(data.params).then(res => {
			data.meetingList.push(...res.data)
		})
	})

	function formatDuration(seconds) {
		let showHours = true
		if (isNaN(seconds) || seconds < 0) return '00:00'
		const hours = Math.floor(seconds / 3600)
		const minutes = Math.floor((seconds % 3600) / 60)
		const remainingSeconds = seconds % 60
		// 补零函数
		const pad = n => n.toString().padStart(2, '0')
		return showHours || hours > 0 ?
			`${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}` :
			`${pad(minutes + hours * 60)}:${pad(remainingSeconds)}`
	}
	onLoad(() => {
		getMeetingList(data.params).then(res => {
			data.meetingList.push(...res.data)
		})
	})
</script>

<style lang="scss">
	page {
		background: #F7F8FC;
	}
	.k1 {
		text-align: center;
		margin: 120rpx auto;
		width: 360rpx;

		image {
			width: 360rpx;
			height: 360rpx;
		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;
		}
	}
	.item {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		box-sizing: border-box;

		image {
			width: 670rpx;
			height: 320rpx;
			border-radius: 20rpx;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.icon {
			width: 28rpx;
			height: 28rpx;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #616169;
			margin-left: 10rpx;
		}

		.btns {
			width: 150rpx;
			height: 64rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 30rpx;
		}

		.b1 {
			background: #FFFFFF;
			border: 1px solid #0756FF;
			color: #0756FF;
		}

		.b2 {
			background: #FF2352;
			color: #fff;
		}

		.b3 {
			background: #0756FF;
			color: #fff;
		}

		.b4 {
			background: #fff;
			border: 1px solid #D1D1D6;
			color: #D1D1D6;
		}

		.b5 {
			background: #D1D1D6;
			color: #fff;
		}
	}
</style>